<!-- 筛选组件 -->
<template>
  <!--- 筛选的内容部分 -->
  <view class="content">
    <view class="content-title">展示方式</view>
    <view class="content-list">
      <view class="content-list-item" @click="onItemClick(0)">
        <view class="element">
          <view class="content-list-item-box" v-for="item in 4"></view>
        </view>
        <view class="button" :class="{ 'btn-active': active === 0 }">矩阵式</view>
      </view>
      <view class="content-list-item" @click="onItemClick(1)">
        <view class="element">
          <view class="content-list-item-line" v-for="item in 6"></view>
        </view>
        <view class="button" :class="{ 'btn-active': active === 1 }">列表式</view>
      </view>
    </view>
  </view>
  <view class="buttons">
    <view class="confirm similar-style" @click="onConfirm">确定</view>
  </view>
</template>

<script>
  export default {
    options: {
      virtualHost: true
    }
  };
</script>
<script setup>
  import { ref, watch, defineProps, defineEmits } from 'vue';
  let emits = defineEmits(['onScreenChange']);
  let props = defineProps({
    modelValue: {
      type: Number,
      default: 0
    }
  });
  let active = ref(0);
  watch(
    () => props.modelValue,
    data => {
      active.value = data;
    }
  );
  const onItemClick = data => {
    if (data === active.value) return;
    active.value = data;
  };
  const onConfirm = () => {
    emits('onScreenChange', active.value);
  };
</script>

<style lang="scss" scoped>
  .btn-active {
    background-color: $dance-main-color !important;
  }
  // 时间顺序 智能顺序 课程舞种
  .content {
    font-size: 28rpx;
    background-color: #333644;
    width: 100%;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    &-title {
      font-size: 35rpx;
      font-weight: bold;
      padding: 70rpx 87rpx;
    }
    &-list {
      display: flex;
      margin-bottom: 310rpx;
      &-item {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        flex: 1;
        align-items: center;
        .element {
          width: 150rpx;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          height: 187rpx;
        }
        &-box {
          margin-bottom: 3rpx;
          height: 91rpx;
          width: 73rpx;
          border-radius: 9rpx;
          background-color: #d9d9d9;
        }
        &-line {
          height: 9rpx;
          width: 174rpx;
          background-color: #d9d9d9;
        }
        .button {
          width: 157rpx;
          height: 61rpx;
          text-align: center;
          line-height: 61rpx;
          border-radius: 78rpx;
          display: inline-block;
          background-color: #959595;
          color: #fff;
          font-weight: bold;
          font-size: 28rpx;
          margin-top: 52rpx;
          transition: all 0.3s;
        }
      }
    }
  }
  .buttons {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 35rpx 0;
    font-size: 36rpx;
    font-weight: bold;
    background-color: #333644;
    // 开会说按钮太大了 暂时调整成这样
    .similar-style {
      width: 297rpx;
      height: 70rpx;
      text-align: center;
      line-height: 80rpx;
      border-radius: 78rpx;
      display: inline-block;
    }
    .confirm {
      background-color: #ff7a66;
    }
  }
</style>
